<template>
	<div class="padding20 member">
		<div class="form">
			<el-row style="margin-bottom: 7px">
				<el-form @submit.native.prevent @keyup.enter.native="toSearch" inline>
					<el-form-item>
						<el-input prefix-icon="el-icon-search" v-model="search.phone" autocomplete="off" placeholder="请输入手机号" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-input prefix-icon="el-icon-search" v-model="search.nickName" autocomplete="off" placeholder="请输入昵称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="medium" icon="el-icon-search" @click="toSearch">查询</el-button>
						<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- <el-button
					type="primary"
					size="medium"
					icon="el-icon-plus"
					v-if="$tools.hasPermission('member:memberGroupMembers:save')"
					@click="handleAdd()"
				>
					选择组员
				</el-button> -->

				<user-select no-group v-model="checkList" @change="addGroupMembers">
					<template #default="{open}">
						<el-button type="primary" size="medium" icon="el-icon-plus" v-if="$tools.hasPermission('member:memberGroupMembers:save')" @click="open">
							选择组员
						</el-button>
					</template>
				</user-select>
			</el-row>
		</div>
		<el-table :data="tableData" row-key="id" ref="elTableRef">
			<el-table-column prop="avatar" label="头像" width="120">
				<template slot-scope="scope">
					<el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 60px; height: 60px; border-radius: 50%;" :preview-src-list="[scope.row.avatar]" />
				</template>
			</el-table-column>
			<el-table-column prop="nickName" label="用户昵称" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="操作" :show-overflow-tooltip="true">
				<template #default="{row}">
					<el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="handleDelete(row)" v-if="$tools.hasPermission('member:memberGroupMembers:delete')">
						<template #reference>
							<el-button size="mini" plain type="danger">
								删除
							</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<br />
		<fortress-pagination :total="total" :current-page="current" :page-size="size" @refreshData="onCurrentSizeChange"></fortress-pagination>
	</div>
</template>

<script>
import { groupMemberPage, groupMemberList, groupMemberSave, groupMemberDel } from "@/api/member/membergroupmembers.js"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	name: "groupmember",
	props: {},
	data() {
		return {
			visible: false,
			search: {
				phone: "",
				groupId: "",
				nickName: "",
			},
			YesNoList: [],
			MemberStatusList: [],
			levelIdList: [],
			tableData: [],
			total: 0,
			current: 1,
			size: 10,
			gridData: [],
			checkList: {
				userGroup: [],
				member: [],
			},
		}
	},
	computed: {},
	created() {
		this.search.groupId = this.$route.query.groupId
		if (!this.search.groupId) {
			this.$router.go(-1)
		}
		this.toSearch()
	},
	methods: {
		toSearch() {
			this.current = 1
			this.tableData = []
			this.getList()
			this.getGroupMember()
		},
		resetQueryForm() {
			this.search.phone = ""
			this.search.nickName = ""

			this.toSearch()
		},
		async getList() {
			try {
				const { code, data, msg } = await groupMemberPage({
					current: this.current,
					size: this.size,
					...this.search,
					groupId: this.$route.query.groupId,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.tableData = data.records
				this.total = data.total
			} catch (error) {
				this.$msg({
					message: error,
					type: "error",
				})
			}
		},
		async getGroupMember() {
			groupMemberList({ groupId: this.$route.query.groupId }).then(resp => {
				if (resp.code == 0) {
					this.checkList.member = resp.data.map(item => ({
						id: item.memberId,
						nickName: item.memberName,
						avatar: item.avatar,
					}))
				}
			})
		},
		onCurrentSizeChange({ current, size }) {
			this.current = current
			this.size = size
			this.getList()
		},

		handleEdit(row) {
			this.$router.push("/member/member-edit?id=" + row.id)
		},
		handleDelete(row) {
			groupMemberDel({ memberId: row.id, groupId: this.$route.query.groupId }).then(resp => {
				if (resp.code == 0) {
					this.$message({
						type: "success",
						message: "操作成功!",
					})
					this.toSearch()
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		addGroupMembers() {
			if (this.checkList.member.length == 0) {
				this.$msg({
					message: "请选择会员提交",
					type: "error",
				})
				return
			}
			let groupMembers = []
			this.checkList.member.map(item => {
				groupMembers.push({
					groupId: this.$route.query.groupId,
					memberId: item.id,
				})
			})
			groupMemberSave(groupMembers).then(resp => {
				if (resp.code == 0) {
					this.$msg({
						message: "操作成功",
						type: "success",
					})
					this.visible = false
					this.checkList.member = []
					this.toSearch()
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
	},
	components: {
		FortressPagination,
	},
}
</script>

<style lang="scss" scoped>
.member {
	.form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}
</style>
